<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 200px;
            width: 300px;
            background: pink;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $("#btnGetHeight").click(function(){
                //获取一个div高度，获取到的值为number类型，不带单位
                var h = $("div").height();
                $("div").text("这个div的高度为 : " + h);  //200

                //用css()方法来获取高度，获取的高度带单位,是String类型
                var h1 = $("div").css("height");
                $("div").text("这个div的高度为 : " + h1);  //200px
                //alert(typeof  h1);
            })

            //设置div的高度
            $("#btnSetHeight").click(function(){
                //可以传入一个数值类型，也可以传入一个字符串类型的值，推荐使用数值类型
                $("div").height(300);
               // $("div").height("300px");
            })

            //获取div的宽度
            $("#btnGetWidth").click(function(){
                //获取的宽度为number类型，也是数值型，不带单位
                var w = $("div").width();
                $("div").text("这个div的宽度为：" + w);
            })

            //设置div 的宽度
            $("#btnSetWidth").click(function(){
                $("div").width(400);
            })
        })
    </script>
</head>
<body>
  <button id="btnGetHeight">获取高度</button>
  <button id="btnSetHeight">设置高度</button>
  <button id="btnGetWidth">获取宽度</button>
  <button id="btnSetWidth">设置宽度</button>
  <div></div>
</body>
</html>